<template>
  <!-- 只有登录状态下才显示导航栏 -->
  <nav v-if="isLoggedIn" class="flex justify-between items-center py-4 px-6 lg:px-8">
    <div class="flex items-center space-x-3">
      <i class="fas fa-fire text-red-500 text-2xl animate-pulse"></i>
      <h1 class="text-xl font-bold text-white">Hot Tomato</h1>
    </div>
    
    <div class="flex items-center space-x-2 lg:space-x-4">
      <router-link 
        v-for="link in navLinks"
        :key="link.to"
        :to="link.to"
        class="nav-link"
        :class="{ 'active': $route.path === link.to }"
      >
        <i :class="link.icon"></i>
        <span class="hidden lg:inline">{{ link.text }}</span>
      </router-link>
      
      <button 
        @click="logout" 
        class="logout-btn"
      >
        <i class="fas fa-sign-out-alt"></i>
        <span class="hidden lg:inline">退出登录</span>
      </button>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'AppNavbar',
  computed: {
    // 从 Vuex store 获取登录状态
    isLoggedIn() {
      return this.$store.state.isLoggedIn;
    }
  },
  data() {
    return {
      navLinks: [
        { to: '/home', icon: 'fas fa-clock', text: '番茄钟' },
        { to: '/history', icon: 'fas fa-history', text: '历史' },
        { to: '/settings', icon: 'fas fa-cog', text: '设置' },
        { to: '/about', icon: 'fas fa-info-circle', text: '关于我们' }
      ]
    }
  },
  methods: {
    logout() {
      this.$store.commit('setLoggedIn', false);
      localStorage.removeItem('isLoggedIn');
      this.$router.push('/');
    }
  }
}
</script>

<style scoped>
nav {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(239, 68, 68, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  font-weight: 500;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover {
  color: #fee2e2;
  background: rgba(239, 68, 68, 0.15);
  transform: translateY(-2px);
}

.nav-link:hover i {
  color: #fee2e2;
  transform: scale(1.1);
}

.nav-link.active {
  color: white;
  font-weight: 600;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: #ef4444;
  border-radius: 3px;
}

.logout-btn {
  background: rgba(239, 68, 68, 0.25);
  border: none;
  padding: 10px 18px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logout-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  color: white;
  transform: translateY(-2px);
}

.logout-btn:hover i {
  transform: rotate(-10deg);
}

@media (max-width: 640px) {
  nav {
    padding: 12px;
  }
  
  .nav-link {
    padding: 8px 12px;
  }
  
  .logout-btn {
    padding: 8px 12px;
  }
}
</style>